<template>
	<view @click="playVoice" v-if="myMsg" style="width: 100%;display: flex;padding: 20rpx;flex-direction: row-reverse;">
		<image :src="$store.state.user.user.avatar" style="width: 80rpx;height: 80rpx;border-radius: 8rpx;" mode=""></image>
		<image src="/static/images/ysj.png" style="width: 30rpx;height: 30rpx;margin-top: 25rpx;" mode=""></image>
		<view class="styleRight" :style="{width:`${(timelong < 1 ? 12 : timelong)*5}px`}">
			<text style="margin-right: 10rpx;">{{timelong}}″</text>
			<image v-if="!voicePlaying" src="/static/images/yyz.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
			<image v-else src="/static/images/yyz.gif" style="width: 35rpx;height: 35rpx;" mode=""></image>
		</view>
	</view>
	<view @click="playVoice" v-else style="width: 100%;display: flex;padding: 20rpx;">
		<image :src="$store.state.fchat.friends[$store.state.fchat.currentFriendId].avatar" style="width: 80rpx;height: 80rpx;border-radius: 8rpx;" mode=""></image>
		<image src="/static/images/zsj.png" style="width: 30rpx;height: 30rpx;margin-top: 25rpx;" mode=""></image>
		<view class="styleLeft" :style="{width:`${(timelong < 1 ? 12 : timelong)*5}px`}">
			
			<image v-if="!voicePlaying" src="/static/images/yyz.png" style="width: 35rpx;height: 35rpx;transform: rotateY(-180deg);" mode=""></image>
			<image v-else src="/static/images/yyz.gif" style="width: 35rpx;height: 35rpx;transform: rotateY(-180deg);" mode=""></image>
			<text style="margin-left: 10rpx;">{{timelong}}″</text>
		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		name: "msgVoiceItem",
		data() {
			return {
				voicePlaying:false
			}
		},
		props: {
			src: {
				type: String,
				default: ""
			},
			timelong:{
				type:Number,
				default:0
			},
			myMsg: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			const _this = this
			innerAudioContext.onEnded(()=>{
				_this.voicePlaying = false
			})
		},
		methods:{
			playVoice: function(){
				if(this.voicePlaying){
					this.voicePlaying = false
					return
				}
				innerAudioContext.src = this.src
				innerAudioContext.play()
				this.voicePlaying = true
			},
		}
	}
</script>

<style scoped>
	.styleRight{
		background: #8bd7ff;
		max-width: 40%;
		min-width: 60px;
		padding: 15rpx;
		font-size: 26rpx;
		border-radius: 8rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.styleLeft{
		background: #fff;
		max-width: 40%;
		min-width: 60px;
		padding: 15rpx;
		font-size: 26rpx;
		border-radius: 8rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>